<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务门户页面</title>
    <script src="js/header.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style>
        .el-dialog {
            display: flex;
            flex-direction: column;
            margin: 0 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*height:600px;*/
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
        }

        .el-dialog .el-dialog__body {
            flex: 1;
            overflow: auto;
        }

        .complaint-wrap {
            height: 120px;
            border: 1px solid #ddd;
            background: #409eff;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .login_title {
            margin-top: 21px;
            width: 100%;
            height: 48px;
            text-align: center;
            font-family: PingFangSC-Semibold;
            font-size: 34px;
            color: #323232;
            letter-spacing: 0px;
            line-height: 48px;
        }
    </style>
</head>
<body>
<div v-cloak id="app">
    <el-container
            class="height100percent"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">
        <!-- 顶栏容器 -->
        <el-header class="el-header" style="height: auto;">
            <el-row type="flex" justify="center">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-row style="text-align: left;">
                            <el-col :span="4">
                                <img src="images/logo_white.png" style="margin-top: 20px;width: 88px;height: 88px;">
                            </el-col>
                            <el-col :span="20">
                                <span class="el-header-title" style="">中国地震局“互联网+监管”公共服务平台</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-content bg-purple-light">
                        <el-row style="text-align: right;">
                            <el-col :span="24">
                                <div v-if="name != ''">
                                    <img src="images/login_image.png"
                                         style="vertical-align: sub;width: 21px;height: 21px;">
                                    <div style="display:inline-block; line-height: 129px;font-family: PingFangSC-Medium;font-size: 16px;color: #FFFFFF;">
                                        <span style="color:#fff;margin-right: 10px;">欢迎{{name}}</span>
                                        <el-button type="text" @click="changePwd"
                                                   style="font-family: PingFangSC-Medium;font-size: 16px;color: #fff;">
                                            修改密码
                                        </el-button>
                                        <el-button type="text" @click="logOut"
                                                   style="font-family: PingFangSC-Medium;font-size: 16px;color: #fff;">
                                            退出
                                        </el-button>
                                    </div>
                                </div>
                                <div v-else>
                                    <img src="images/login_image.png"
                                         style="vertical-align: sub;width: 21px;height: 21px;">
                                    <div style="display:inline-block; line-height: 129px;font-family: PingFangSC-Medium;font-size: 16px;color: #FFFFFF;">
                                        <span class="headMenu" prop="userType" :label="用户类型" @click="login">登录</span>
                                        <span style="color: #FFFFFF;opacity: 0.5;">/</span>
                                        <span class="headMenu" prop="userType" :label="用户类型" @click="register">注册</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="background: #1D60A6;">
                <el-col :span="15">
                    <ul class="ul-left ul-tab">
                        <li style="background: #185392;width: 15%;">
                            <span class="tab_title">首页</span>
                        </li>
                        <li style="width: 20%" v-show="hasApprovalBtn">
                            <a :href="apURL" target="_blank">
                                <span class="tab_title">安评系统</span>
                            </a>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </el-header>
        <!-- 主要区域容器 -->
        <el-main>
            <!--<iframe frameborder="0" width="100%" id="frame-index" :src="iframesrc" style="min-height: 400px;" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>-->
            <iframe frameborder="0" width="100%" ref="iframename" id="frame-index" :src="iframesrc"
                    style="min-height: 400px;" @load="loadSetIframeHeight" scrolling="no"></iframe>
        </el-main>
        <!-- 底栏容器 -->
        <el-footer style="height: auto;margin-top: 26px;">
            <el-row>
                <el-col>
                    <div class="grid-content bg-purple">
                        <el-row type="flex" justify="center" class="bottom_link"
                                style="background-image: linear-gradient(-78deg, #1765A7 0%, #1665A7 99%);">
                            <el-col :span="15">
                                <div style="text-align: left;">
                                    <span class="other_link_title" style="width: 12.5%;">友情链接：</span>
                                    <a href="#" class="other_link" style="width: 13%;"><span>中国科普博览</span></a>
                                    <a href="#" class="other_link" style="width: 13%;"><span>中国科技云</span></a>
                                    <a href="#" class="other_link" style="width: 26%;"><span>中科院仪器设备共享管理平台</span></a>
                                    <a href="#" class="other_link" style="width: 18%;"><span>首都科技条件平台</span></a>
                                    <a href="#" class="other_link"><span>中国科学院</span></a>
                                    <a href="#" class="other_link_last"><span>科搜网</span></a>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="center" class="bottom_others"
                                style="padding: 25px 0;background-color: #E4EBEF;">
                            <el-col :span="15">
                                <div class="divleft" style="margin-top: 5px;">
                                    <img src="images/finderror.png" style="width: 129px;height: 57px;">
                                </div>
                                <div class="divleft" style="margin-left: 5%;">
                                    <img src="images/logo.png" style="width: 67px;height: 67px;">
                                </div>
                                <div class="divleft"
                                     style="width: 44%; margin-left: 4%;text-align: left;padding-right: 3px;">
                                    <div style="line-height: 1em;">
                                        <span class="website_footer">本平台为国家重点研发计划“现代服务业”重点专项项目</span>
                                    </div>
                                    <div style="margin: 5px 0;line-height: 1em;">
                                        <span class="website_footer">京公安网备11010802017084号</span>
                                    </div>
                                    <div style="line-height: 1em;">
                                        <span class="website_footer">Copyright@2019 中国地震局“互联网+监管”公共服务平台 版权所有</span>
                                    </div>
                                </div>
                                <div class="divleft"
                                     style="width: 1px;height: 70px;border-left: 1px solid #9B9B9B;opacity: 0.56;"></div>
                                <div class="divleft" style="float: right;text-align: left;">
                                    <div style="line-height: 1em;">
                                        <span class="website_footer">地址：北京海淀区学院南路55号</span>
                                    </div>
                                    <div style="margin: 5px 0;line-height: 1em;">
                                        <span class="website_footer">邮箱：074200</span>
                                    </div>
                                    <div style="line-height: 1em;">
                                        <span class="website_footer">主办单位：中国地震局</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-footer>

        <!-- 投诉举报 -->
        <el-dialog title="投诉建议入口" :visible.sync="dialogComplaintView" center="true" width="45%">
            <div>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="6">
                        <div class="complaint-wrap" @click="openComplaint('ap')">
                            <div style="position: relative;top: 50%;margin-top: -9px;">
                                <span style="font-size: 18px;">安评单位举报</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="complaint-wrap" @click="openComplaint('wgr')">
                            <div style="position: relative;top: 50%;margin-top: -19px;">
                                <div style="font-size: 18px;">外国人来华举报</div>
                                <div style="font-size: 18px;">（需要实名举报）</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>

        <el-dialog title="" :visible.sync="dialogTableVisible" center="true" width="45%">
            <div>
                <el-row>
                    <el-col style="height: 30px;text-align: center;">{{ city.cityName }}</el-col>
                    <el-col>
                        <el-col :span="12">
                            <el-row id="dialog">
                                <el-col style=" height: 30px;text-align: center;">总数</el-col>
                                <el-col>
                                    <div class="dialog">
                                        <div class="dialog_num">{{ city.cityCounts }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="12">
                            <el-row id="dialog">
                                <el-col style=" height: 30px;text-align: center;">占全国比例</el-col>
                                <el-col>
                                    <div class="dialog">
                                        <div class="dialog_num">{{ (city.cityCounts / city.cityTotal * 100) | numFilter
                                            }}%
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>

        <!-- 修改密码-->
        <el-dialog :visible.sync="changePwdView" center="true" width="40%">
            <el-form :model="changeForm" :rules="rules" ref="changeForm" label-width="140px" class="form_date_width">
                <el-row>
                    <el-col :span="4" class="tab-title">
                       修改密码
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="用户名:" prop="name"  label-width="150px">
                            <el-input v-model="name" placeholder="" :disabled="true" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="原密码:" prop="oldPassword" :rules="rules.oldPassword"  label-width="150px">
                            <el-input v-model="changeForm.oldPassword" placeholder="" disabled ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="新密码:" prop="password" :rules="rules.password"  label-width="150px">
                            <el-input v-model="changeForm.password" placeholder="" :disabled="false" show-password ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="确认密码:" prop="quePassword" :rules="rules.quePassword" label-width="150px">
                            <el-input v-model="changeForm.quePassword" placeholder="" :disabled="false" show-password ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <div style="float:right;">
                            <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="onReplace()">确定</el-button>
                            <el-button type="info" size="small" style="width: 60px;height: 30px;" @click="qxDialog()">取消</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

    </el-container>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        created: function () {
            // 获取用户信息
           /* var encrypt = new JSEncrypt();
            encrypt.setPublicKey(publicKey);
            let chushi = encrypt.encrypt('111111');
            var pwd = JSON.parse(localStorage.getItem('pwd'));
            if(chushi === pwd){
                this. changePwd();
            }*/
            this.changeForm.oldPassword = JSON.parse(localStorage.getItem('pwd'));

            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            if (userInfo != null) {
                this.name = userInfo.loginName;
                this.userId = userInfo.userId;
            }
            this.iframesrc = 'html/main/firstpage.html';

            this.preurl = JSON.parse(localStorage.getItem('preurl'));
            if (this.preurl != null && this.preurl != "") {
                var url = this.preurl.replace("/" + appBaseUrl, "");
                this.iframesrc = url;
            } else {
                this.iframesrc = 'html/main/firstpage.html';
            }
        },
        data: function () {

            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入确认密码'))
                } else if (value !== this.changeForm.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            var validatePass3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'))
                } else if (value == this.changeForm.oldPassword) {
                    callback(new Error('新密码与原密码一致!'))
                } else {
                    callback()
                }
            }

            return {
                imagesbox: [
                    {id: 0, idView: "images/forest.png"},
                    {id: 1, idView: "images/sunrise.jpg"},
                    {id: 2, idView: "images/sunshine.png"}
                ],
                changeForm:{
                    loginName: "",
                    password: "",
                    quePassword:"",
                    oldPassword:""
                },
                name: "",
                preurl: "",
                iframesrc: '',
                iframeheight1: '',// iframe原始高度
                iframeheight2: '',// iframe改变后高度
                loading: false,
                dialogComplaintView: false, // 投诉举报dialog
                apURL: apURL,
                sysApp: '',
                hasApprovalBtn: false,
                city: [],
                dialogTableVisible: false,
                changePwdView: false,
                loginName: "",
                password: "",
                userId:"",
                oldPassword:"",

                rules: {
                    password: [
                        { required: true, trigger: 'blur',validator: validatePass3 },
                        { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,30}$/,
                            message: '密码为数字,小写字母,大写字母,特殊符号至少包含三种,长度为6 - 30位'}
                    ],
                    quePassword: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ],
                    oldPassword: [
                        { required: true,
                            message: "原密码必填",
                            trigger: "blur" }
                    ]

                }
            }
        },
        mounted: function () {
            this.getApp();
            this.loadingTime();
        },
        methods: {
            logOut() {
                axios({
                    method: 'post',
                    url: appBaseUrl + '/login/logout',
                })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            localStorage.clear();
                            location.href = location.origin + appBaseUrl + '/index.html';
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //打开修改密码dialog
            changePwd(){
                this.changePwdView = true;
            },
            //关闭修改密码dialog
            qxDialog(){
             this.changeForm.password = '';
             this.changeForm.loginName = '';
             this.changeForm.quePassword ='';
                this.changePwdView = false;
            },
            //确定跳转后台接口
            onReplace(){
                this.$refs.changeForm.validate(valid => {
                    if(valid){
                    var encrypt = new JSEncrypt();
                    encrypt.setPublicKey(publicKey);
                    let result = encrypt.encrypt(this.changeForm.password);
                    let oldresult = encrypt.encrypt(this.changeForm.oldPassword);
                    axios({
                        method: 'post',
                        url: '/dzjportalfw/changePwd/update',
                        params: {
                            oldPassword:oldresult,
                            password:result,
                            userId: this.userId

                        }
                    })
                        .then(response => {
                            let data = response.data;
                            if (data.code == 200) {
                                localStorage.clear();
                                this.logOut();
                            } else {
                                this.$message.error(data.msg);
                                this.qxDialog();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            this.qxDialog();
                        })
                    }
                });
            },
            login() {
                location.href = "html/login.html"
            },
            register() {
                location.href = "html/register.html"
            },
            // 初始设置iframe的高度
            loadSetIframeHeight() {
                var iframe = document.getElementById('frame-index');
                if (iframe) {
                    iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
                    this.iframeheight1 = iframe.contentWindow.document.documentElement.scrollHeight;
                }
            },
            // 设置iframe的高度
            setIframeHeight(height) {
                var iframe = document.getElementById('frame-index');
                if (iframe) {
                    iframe.height = height;
                }
            },
            // 恢复原高度
            recoveryIframeHeight() {
                var iframe = document.getElementById('frame-index');
                if (iframe) {
                    iframe.height = this.iframeheight1;
                }
            },
            loadingTime() {
                this.loading = true;
                var $this = this;
                setTimeout(function () {
                    $this.loading = false;
                }, 1500)
            },
            // 页面跳转
            changePage(url) {
                this.loadingTime();
                this.iframesrc = url;
            },
            //返回主页
            backIndex() {
                localStorage.setItem("preurl", JSON.stringify(""));
                this.firstpagesrc = 'html/main/firstpage.html';
                window.location.reload();
            },
            // 投诉举报dialog
            openDialog() {

            },

            openDialog(dialog, nums) {
                if (dialog == 'dialogTableVisible') {
                    this.dialogTableVisible = true;
                    this.city = nums;
                } else {
                    this.dialogComplaintView = true;
                }
            },
            openComplaint(n) {
                this.$refs.iframename.contentWindow.firstpage.openComplaintDialog(n); // 调用iframe里面的方法
                this.dialogComplaintView = false;
            },
            getApp() {
                axios({
                    method: 'get',
                    url: appBaseUrl + '/sys/getsys',
                }).then(response => {
                    let data = response.data.data;
                    this.sysApp = data;
                    if (this.sysApp != undefined) {
                        for (var i = 0; i < this.sysApp.length; i++) {
                            if (this.sysApp[i].appName.includes("安评系统")) {
                                this.hasApprovalBtn = true;
                            }
                        }
                    }
                })
            }
        }
    })
</script>
</html>
